import { useEffect, useState } from 'react';
import { Menu } from './index.config';
import { useHistory } from 'umi';
import './index.less';

const IndexPage = (props: any) => {
  const [tab, setTab] = useState('综合概况');
  const history = useHistory();
  useEffect(() => {
    history.push('/AggreSituation');
  }, []);
  const toPage = (val: any) => {
    setTab(val.title);
  };
  return (
    <div className="index-page">
      <div className="page-header">
        <div className="page-header-left">化工园区地下水污染溯源系统</div>
        <div className="page-header-right">
          {Menu.map((val: any) => {
            return (
              <div
                key={val.title}
                className={`header-item ${val.disabled ? 'disabled' : ''} ${
                  val.title === tab ? 'active' : ''
                }`}
                onClick={() => {
                  if (!val.disabled) {
                    toPage(val);
                  }
                }}
              >
                {val.title}
              </div>
            );
          })}
        </div>
      </div>
      <div className="current-position">当前位置：{tab}</div>
      <div className="page-content">{props.children}</div>
    </div>
  );
};
export default IndexPage;
